<template>
  <el-container class="index" :style="{height: height +'px'}">
    <home-aside class="home-aside"></home-aside>
    <el-container ref="keycontent" :style="{height:height + 'px'}">
      <key-list></key-list>
      <router-view v-slot="{ Component }" :key="routerKey">
        <component :is="Component"/>
      </router-view>
    </el-container>
  </el-container>
</template>

<script>
import HomeAside from '@/views/aside/aside'
import KeyList from '@/views/keylist/key_list'

export default {
  name: "Home",
  components: {
    HomeAside,
    KeyList,
  },
  data() {
    return {
      search: "",
      defaultDatabase: 0,
      value: '',
      height: 200,
      options: [
        {value: 0, label: 'db0'},
        {value: 1, label: 'db1'},
        {value: 2, label: 'db2'},
      ],
      count: 0,
      activceKey: '',
    };
  },
  computed: {
    routerKey() {
      return this.$route.path + '_' + Math.random()
    }
  },
  mounted() {
    this.$nextTick(() => {
      window.onresize = () => {
        this.height = window.innerHeight
      }
    })
  },
  created() {
    this.height = window.innerHeight
    // 在页面加载时读取sessionStorage 保存状态
    /*if (sessionStorage.getItem('store')) {
      this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessionStorage.getItem('store'))))
    }
    // 在页面刷新时将store保存到sessionStorage里
    window.addEventListener('beforeunload', () => {
      sessionStorage.setItem('store', JSON.stringify(this.$store.state))
    })*/
  },
};
</script>

<style scoped lang="less">
.index {
  width: 100%;
  height: 100%;
}
</style>